<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="售后编号">
              <a-input v-model="queryParam.numbering" placeholder="请输入售后编号"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="订单编号">
              <a-input v-model="queryParam.order_numbering" placeholder="请输入订单编号"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="商品编号">
              <a-input v-model="queryParam.commodity_numbering" placeholder="请输入商品编号"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="活动编号">
              <a-input v-model="queryParam.commodity_activity_numbering" placeholder="请输入活动编号"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="快递单号">
              <a-input v-model="queryParam.tracking_numbering" placeholder="请输入快递单号"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="收货人">
              <a-input v-model="queryParam.client_search" placeholder="请输入收货人"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="供货商">
              <a-input v-model="queryParam.supplier_search" placeholder="请输入供应商"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="代理商">
              <a-input v-model="queryParam.agent_search" placeholder="请输入代理商名称或手机号"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="售后状态">
              <a-select v-model="queryParam.status" placeholder="请选择">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">待审核</a-select-option>
                <a-select-option value="2">跟进中</a-select-option>
                <a-select-option value="3">审核通过</a-select-option>
                <a-select-option value="4">审核未通过</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="售后类型">
              <a-select v-model="queryParam.type" placeholder="请选择">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">退货</a-select-option>
                <a-select-option value="2">重发货</a-select-option>
                <a-select-option value="3">只退款</a-select-option>
                <a-select-option value="4">补偿</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="创建时间">
              <a-range-picker :allowClear="true" :defaultValue="createdAtRange" ref="createdAtRangePicker" @change="createdAtRangePickerOnChange"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
              <a-button style="margin-left: 8px" @click="handleExport">导出</a-button>
              <a-button style="margin-left: 8px" @click="handleExport(true)">大数据导出</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <s-table
      ref="table"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :pageNum="parseInt(queryParam.page || 1)"
      :pageSize="parseInt(queryParam.per_page || 20)"
      showPagination="auto"
    >
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="locationHrefDetail(record)">详情</a>
        </template>
      </span>
    </s-table>
  </a-card>
</template>

<script>
  import { Ellipsis, STable } from '@/components'
  import { getAfterSaleOrderList } from '@/api/order'
  import { formatAmount } from '@/utils/util'
  import cloneDeep from 'lodash.clonedeep'
  import moment from 'moment'

  const statusMap = {
    1: {
      text: '待审核'
    },
    2: {
      text: '跟进中'
    },
    3: {
      text: '已通过'
    },
    4: {
      text: '未通过'
    },
    5: {
      text: '已取消'
    }
  }

  const AfterSaleTypeMap = {
    1: {
      text: '退货'
    },
    2: {
      text: '重发货'
    },
    3: {
      text: '只退款'
    },
    4: {
      text: '补偿'
    }
  }

  export default {
    name: 'List',
    components: {
      STable,
      Ellipsis
    },
    created () {
      this.queryParam = cloneDeep(this.$route.query)
      if (this.queryParam.created_at_begin && this.queryParam.created_at_end) {
        this.createdAtRange = [moment(this.queryParam.created_at_begin), moment(this.queryParam.created_at_end)]
      }
    },
    data () {
      return {
        // 查询参数
        queryParam: {
          created_at_begin: moment().subtract(1, 'months').format('YYYY-MM-DD'), // 默认最近一个月
          created_at_end: moment().format('YYYY-MM-DD')
        },
        createdAtRange: [moment().subtract(1, 'months'), moment()],
        // 表头
        columns: [
          {
            title: '售后编号',
            width: '150px',
            dataIndex: 'numbering'
          },
          {
            title: '商品编号',
            width: '100px',
            dataIndex: 'commodity_numbering'
          },
          {
            title: '商品名称',
            width: '150px',
            dataIndex: 'order.commodity_name'
          },
          {
            title: '活动编号',
            dataIndex: 'commodity_activity_numbering'
          },
          {
            title: '供应商',
            dataIndex: 'supplier.name'
          },
          {
            title: '代理名称',
            dataIndex: 'agent.name'
          },
          {
            title: '代理手机号',
            dataIndex: 'agent.phone'
          },
          {
            title: '相关订单',
            width: '150px',
            dataIndex: 'order_numbering'
          },
          {
            title: '售后类型',
            customRender: record => AfterSaleTypeMap[record['type']].text
          },
          {
            title: '收件人姓名',
            dataIndex: 'order.client_name'
          },
          {
            title: '收件人手机号',
            dataIndex: 'order.client_phone'
          },
          {
            title: '金额',
            customRender: record => {
              switch (record.type) {
                case 1:
                  return formatAmount(record.after_sale_order_skus.reduce((total, curr) => total + (curr.amount * curr.unit_price), 0))
                case 2:
                  return 0
                case 3:
                  return formatAmount(record.refund_amount)
                case 4:
                  return formatAmount(record.compensation)
              }
            }
          },
          {
            title: '状态',
            dataIndex: 'status',
            customRender: status => statusMap[status].text
          },
          {
            title: '申请时间',
            dataIndex: 'created_at'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        firstLoadData: true,
        loadData: parameter => {
          let query = null
          if (this.firstLoadData) { // 第一次加载数据,需要以 router query 为准
            this.firstLoadData = false
            query = cloneDeep(Object.assign(parameter, this.queryParam))
          } else {
            query = cloneDeep(Object.assign(this.queryParam, parameter))
          }
          try {
            // 把搜索条件放入 query
            this.$router.push({ path: this.$route.fullPath, query })
          } catch (e) {
          }

          return getAfterSaleOrderList(query)
        }
      }
    },
    methods: {
      createdAtRangePickerOnChange (date, dateString) {
        this.queryParam.created_at_begin = dateString[0]
        this.queryParam.created_at_end = dateString[1]
      },
      handleReset () {
        this.queryParam = {}
        this.$router.push({ query: {} })
        this.$refs.createdAtRangePicker.$refs.picker.clearSelection(new MouseEvent('click'))
        this.$refs.table.refresh(true)
      },
      handleExport (isAsync = false) {
        const exportParam = { export: true }
        ;(isAsync === true) && Object.assign(exportParam, { async: true })

        getAfterSaleOrderList(Object.assign(exportParam, this.queryParam)).then(_ => {
          (isAsync === true) && this.$notification.success({ message: '添加任务成功,请关注[系统-异步导出任务]' })
        })
      },
      locationHrefDetail (record) {
        this.$router.push({ path: `info/${record.id}` })
      }
    }
  }
</script>
